<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>11_CSS3-渐变属性-径向渐变</title>
        <style>
            div {
                width: 300px;
                height: 200px;
                border: solid 1px black;
                margin-right: 10px;
                margin-bottom: 10px;
                float: left;
            }

            .item1 {
                background-image: radial-gradient(red);
                background-image: repeating-radial-gradient(red,green);
            }

            .item2 {
                background-image: repeating-radial-gradient(red,yellow,green);
            }

            .item3 {
                background-image: repeating-radial-gradient(at left top,red,yellow,green);
            }

            .item4 {
                background-image: repeating-radial-gradient(at 50px 50px,red,yellow,green);
            }

            .item5 {
                background-image: repeating-radial-gradient(circle,red,yellow,green);
            }

            .item6 {
                background-image: repeating-radial-gradient(circle at left top,red,yellow,green);
            }


            .item7 {
                background-image: repeating-radial-gradient(circle,red 50px,yellow 100px,green);
            }
        </style>
    </head>
    <body>
        <div class="item item1">
            2个颜色
        </div>

        <div class="item item2">
            3个颜色
        </div>

        <div class="item item3">
            调整圆心位置-方向
        </div>

        <div class="item item4">
            调整圆心位置-坐标
        </div>

        <div class="item item5">
            调整渐变的形状-圆
        </div>

        <div class="item item6">
            调整渐变的形状-圆-位置
        </div>

        <div class="item item7">
            调整渐变的位置
        </div>
    </body>
</html>